@extends('home.common.layout')

@section('title', $articleContent->title)

@section('content')
    <script type="text/javascript">
        (function () {
            window.TypechoComment = {
                dom: function (id) {
                    return document.getElementById(id);
                },

                create: function (tag, attr) {
                    var el = document.createElement(tag);

                    for (var key in attr) {
                        el.setAttribute(key, attr[key]);
                    }

                    return el;
                },

                reply: function (cid, coid) {
                    var comment = this.dom(cid), parent = comment.parentNode,
                        response = this.dom('respond-post-306'), input = this.dom('comment-parent'),
                        form = 'form' == response.tagName ? response : response.getElementsByTagName('form')[0],
                        textarea = response.getElementsByTagName('textarea')[0];

                    if (null == input) {
                        input = this.create('input', {
                            'type': 'hidden',
                            'name': 'parent',
                            'id': 'comment-parent'
                        });

                        form.appendChild(input);
                    }

                    input.setAttribute('value', coid);

                    if (null == this.dom('comment-form-place-holder')) {
                        var holder = this.create('div', {
                            'id': 'comment-form-place-holder'
                        });

                        response.parentNode.insertBefore(holder, response);
                    }

                    comment.appendChild(response);
                    this.dom('cancel-comment-reply-link').style.display = '';

                    if (null != textarea && 'text' == textarea.name) {
                        textarea.focus();
                    }

                    return false;
                },

                cancelReply: function () {
                    var response = this.dom('respond-post-306'),
                        holder = this.dom('comment-form-place-holder'), input = this.dom('comment-parent');

                    if (null != input) {
                        input.parentNode.removeChild(input);
                    }

                    if (null == holder) {
                        return true;
                    }

                    this.dom('cancel-comment-reply-link').style.display = 'none';
                    holder.parentNode.insertBefore(response, holder);
                    return false;
                }
            };
        })();
    </script>
    <div class="title-article">
        <h1>{{ $articleContent->title }}</h1>
        <div class="title-msg">
            <span><i class="layui-icon">&#xe612;</i> admin </span>
            <span><i class="layui-icon">&#xe60e;</i> {{ $articleContent->created_at }} </span>
            <span><i class="layui-icon">&#xe62c;</i> {{ $articleContent->click }}℃</span>
            <span><i class="layui-icon">&#xe63a;</i> {{ $articleContent->comment->count() }}条</span>
        </div>
    </div>
    <div class="text" itemprop="articleBody">
        {!! $articleContent->html !!}
    </div>
    <div class="tags-text">
        <i class="layui-icon">&#xe66e;</i>标签: @foreach($articleContent->tags as $tag) {{ $tag->name }} @endforeach
    </div>
    <div class="copy-text">
        <div>
            <p>非特殊说明，本博所有文章均为博主原创。</p>
            <p class="hidden-xs">如若转载，请注明出处：<a
                        href="{{ url("/article/$articleContent->id") }}">{{ url("/article/$articleContent->id") }}</a>
            </p>
        </div>
    </div>
    <div class="page-text">
        @if($prev)
            <div>
                <span class="layui-badge layui-bg-gray">上一篇</span>
                <a href="{{ url("/article/{$prev['id']}") }}" title="{{ $prev['title'] }}">{{ $prev['title'] }}</a>
            </div>
        @endif
        @if($next)
            <div>
                <span class="layui-badge layui-bg-gray">下一篇</span>
                <a href="{{ url("/article/{$next['id']}") }}" title="{{ $next['title'] }}">{{ $next['title'] }}</a>
            </div>
        @endif
    </div>

    <div class="comment-text layui-form">
        <div id="comments">
            <div id="respond-post-306" class="respond">
                <div class="cancel-comment-reply">
                    <a id="cancel-comment-reply-link" href="{{ request()->url() }}#respond-post-{{$articleContent->id}}"
                       rel="nofollow" style="display:none" onclick="return TypechoComment.cancelReply();">取消回复</a>
                </div>
                <h4 id="response"><i class="layui-icon">&#xe664;</i> 评论啦~</h4>
                <form method="post" action="{{ url("/article/$articleContent->id/comment") }}" id="comment-form"
                      role="form">
                    @csrf
                    <div class="layui-form-item">
                        <textarea rows="5" cols="30" name="text" id="textarea" placeholder="嘿~ 大神，别默默的看了，快来点评一下吧"
                                  class="layui-textarea" required></textarea>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-normal">提交评论</button>
                    </div>
                </form>
            </div>
            <br/>
            <h3>已有 {{ $articleContent->comment->count() }} 条评论</h3>
            <br/>
            <div class="pinglun">
                <ol class="comment-list">
                    @foreach($comments as $comment)
                        <li id="li-comment-{{ $comment->id }}" class="comment-body comment-parent comment-even">
                            <div id="comment-{{ $comment->id }}" class="pl-dan comment-txt-box">
                                <div class="t-p comment-author">
                                    <img class="avatar"
                                         src="https://ui-avatars.com/api/?name={{ $comment->member->name }}"
                                         alt="{{ $comment->member->name }}" width="40" height="40"/>
                                </div>
                                <div class="t-u comment-author">
                                    <strong>
                                        {{ $comment->member->name }} <span class="layui-badge"></span>
                                    </strong>
                                    <div><b></b></div>
                                    <div class="t-s">
                                        {{ $comment->content }}
                                    </div>
                                    <span class="t-btn">
                                    <a href="{{ url("/article/$comment->article_id") }}?replyTo={{$comment->id}}#respond-post-{{$comment->article_id}}"
                                       rel="nofollow"
                                       onclick="return TypechoComment.reply('comment-{{$comment->id}}', {{$comment->id}});">回复</a>
                                    <span class="t-g">{{ $comment->created_at }}</span></span>
                                </div><!-- 单条评论者信息及内容 -->
                            </div>
                            @if($comment->allChilds)
                                <div class="pl-list comment-children">
                                    <ol class="comment-list">
                                        @foreach($comment->allChilds as $item)
                                            <li id="li-comment-{{ $item->id }}"
                                                class="comment-body comment-child comment-level-odd comment-even">
                                                <div id="comment-{{ $item->id }}" class="pl-dan comment-txt-box">
                                                    <div class="t-p comment-author">
                                                        <img class="avatar"
                                                             src="https://ui-avatars.com/api/?name={{ $item->member->name }}"
                                                             alt="{{ $item->member->name }}" width="40" height="40"/>
                                                    </div>
                                                    <div class="t-u comment-author">
                                                        <strong>
                                                            {{ $item->member->name }} <span class="layui-badge"></span>
                                                        </strong>
                                                        <div>
                                                            <b><a href="#comment-{{ $comment->id }}">@ {{ $comment->member->name }}</a></b>
                                                        </div>
                                                        <div class="t-s">
                                                            {{ $item->content }}
                                                        </div>
                                                        <span class="t-btn">
                                    <a href="{{ url("/article/$item->article_id") }}?replyTo={{$item->id}}#respond-post-{{$item->article_id}}"
                                       rel="nofollow"
                                       onclick="return TypechoComment.reply('comment-{{$item->id}}', {{$item->id}});">回复</a>
                                    <span class="t-g">{{ $item->created_at }}</span></span>
                                                    </div><!-- 单条评论者信息及内容 -->
                                                </div>
                                            </li>
                                        @endforeach
                                    </ol>
                                </div>
                            @endif
                        </li>
                    @endforeach
                </ol>
            </div>
        </div>
    </div>
@endsection